前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

# 前言

系统架构设计.png

是时候再祭出这张图了,由于时间有限(虚拟机也崩了。。不会熟悉的人还是上云服务器吧),这一章的内容更多的是提供解决方案与思路,大家可以根据自己的项目情况,来融入整体流程中即可。

前面的 Devops 主要集成了 Gitlab 与 Jenkins,发布我们使用的 Nginx(发布静态项目)与 Rancher(发布 node 服务)。代码静态扫描使用了 Sonar,埋点与性能监控使用的是 Sentry。其中 Rancher 、Sentry、Sonar 都是独立的模块,并没有接入 Devops,本章将会结合之前的设计,将这些内容纳入到 Devops 体系中去。

# 接入的设计

在前面三章介绍的,不知道大家有没有留意,每个模块都与我们的 Devops 流程设计中存在 2 个相通的地方:

  1. 项目(无论何种方式都是基于 Gitlab 的项目构建出来)
  2. 版本(无论是基于 Branch 还是自定义的版本都有 Version 的概念)

而在我们的 Devops 中,采用的自建 Version 与 Branch 绑定的关系,所以我们在对接各个模块的时候,可以通过对应的项目与版本进行关联,使用每个模块提供的 Web API 将需要的数据或者对应的操作集成到 Devops 工程中。

未命名文件.png

接下来,我们将以 Senrty 为例子,介绍集成的方案。

# Sentry 集成

# Sentry Api

下图是 Sentry 对应的 Web Api 接口文档,可以挑选一些需要集成到我们项目中的接口配合即可。

image.png

首先,基于 Gitlab,我们可以获取到对应的 Group 的信息,那么每个 Group 可以映射到对应的 Senrty 的 Teams。

所以在 Devops 中,当用户进来之后,所属的 Group 映射到 Sentry 就是对应的 Teams 信息,比较简单的操作是 Group 与 Teams name 保持一一对应,这样就不需要新建关联表。

  1. 创建项目的时候,通过对应的 API 创建对应的 Project

image.png

  1. 再项目创建完毕之后,通过 Sentry 提供的 Project 的 Api,创建对应的 DSN。

image.png

  1. 项目发布到预发环境的时候,创建对应的 Release,并通过构建流程上传对应的 sourcemap。
  2. 如果想集成更多的话,可以使用
    fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏